iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
Modern Web

web component - 次世代網頁技術的重要拼圖系列 第 19

[Day18] web component 的應用-微前端

  • 分享至 

  • xImage
  •  

因為時間不足,有些部分有少圖片。但考慮到我的進度,可能要完賽後慢慢補上了。

微前端

說實話,我對這個應用沒有很在行。不僅因為微前端本身就不像微服務一樣有一個固定的的定義,加上真的需要微前端的專案也不多見。畢竟現代前端框架慢慢的集中在三大框架上,加上前後端分離。己經比較少同一家公司內的前端專案還會有各種框架或是程式碼多到要分開來放。

以臺灣來說,我想博奕會比較容易出現微前端?(可能平臺是一種技術,遊戲區是一種技術,直播區又是另一種技術)。
我自己是認為monorepo就己經很夠用了,畢竟不是每個公司都會讓每個前端專案都用不同的框架或環境,還要打包成一個前端。

微前端的介紹

當然啦,我可不敢自稱很懂微前端,我找了一些文章放在下面當參考

文章一:用比較白話一點的方法介紹微前端。文章
文章二:(我認為)非常完整的介紹微前端。英文的介紹
文章三:介紹微前端一些實做細節(對面的文章)知乎的文章

使用web component來做微前端

例子:使用angular和react做簡單的微前端文章

微前端-container

container的部分會簡單一點,因為section都是以web component的形式引入,只要當成html來處理就好。

微前端-section

section的部分會麻煩一點,因為要把專案的程式碼做成web component。

如果專案是以三大框架來建構的話,網路上有許多文章有說明如何把程式碼做成web component;如果不是使用三大框架的話,也許先deploy到某一個domain,再把生成的URL做成web component會比較快(?)


上一篇
[Day17] web component 的應用-跨程式語言的合作
下一篇
web component 的實做- 推薦的最佳實踐方式和個人心得
系列文
web component - 次世代網頁技術的重要拼圖30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言